<template>
    <div>
        <el-dialog :title="dialogInfo.isAdd ? '添加轮播图' : '修改轮播图'" :visible.sync="dialogInfo.isShow" center :before-close="cancel">
            <el-form :model="bannerFrom" :rules="rules" ref="bannerRef">
                <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="bannerFrom.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card"
                        :on-preview="onPreview" 
                        :auto-upload="false" :on-change="changeInfo"   :file-list="fileList" 
                        :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="bannerFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addBanner" >添 加</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { bannerAdd,bannerInfo,bannerEdit } from '../../request/api'
import {mapActions} from 'vuex'
export default {
    props: ['dialogInfo'],
    data() {
        return {
            formLabelWidth: '120px',
            bannerFrom: {
                title: '', //轮播图名称
                img: '',//图片(文件)
                status: 1
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            },
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[]
        }
    },
    methods: {
        ...mapActions({
            getBanner:'banner/changeBannerAction'
        }),
        reset(){
            this.bannerFrom= {
                title: '', //轮播图名称
                img: '',//图片(文件)
                status: 1
            }
        },
        cancel(){
            this.$emit('cancel',false)
        },
        // 回显
        lookup(id){
            bannerInfo({id}).then(res=>{
                if(res.code==200){
                    this.bannerFrom=res.list
                    this.bannerFrom.id=id
                    //图片回显
                    this.fileList =this.bannerFrom.img? [{url:this.bannerFrom.img}]:[]
                }
            })
        },
        // 添加事件
        addBanner() {
            this.$refs.bannerRef.validate(val=>{
                if(val){
                    if(this.dialogInfo.isAdd){
                        bannerAdd(this.bannerFrom).then(res=>{
                           if(res.code==200){
                            this.$message.success(res.msg)
                            this.cancel()
                            this.getBanner()
                           }else{
                            this.$message.error(res.msg)
                           }
                        })
                    }else{
                        bannerEdit(this.bannerFrom).then(res=>{
                           if(res.code==200){
                            this.$message.success(res.msg)
                            this.cancel()
                            this.getBanner()
                           }else{
                            this.$message.error(res.msg)
                           }
                        })
                    }
                }
            })
        },
        changeInfo(file, fileList) {
            this.bannerFrom.img=file.raw
        },
        // 图片预览
        onPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>